<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
  <title>Register Page</title>
</head>
<body>
  <div class="container">
    <div class="header text-center" style="padding: 50px;background-color: #ccc;">
      <br>
      <h2>Register Page</h2>
    </div>
    <div class="loginDiv" style="padding-top: 50px;">
      <form action="/register" method="post" id="registerForm">
        <div class="form-group row">
          <label for="forUsername" class="col-sm-3 col-form-label text-center">Username</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" id="forUsername" name="username" required>
          </div>
        </div>
        <div class="form-group row">
          <label for="forPassword" class="col-sm-3 col-form-label text-center">Password</label>
          <div class="col-sm-8">
            <input type="password" class="form-control" id="forPassword" name="password" required minlength="6" maxlength="18">
          </div>
        </div>
        <div class="form-group row">
          <label for="forConfirmPassword" class="col-sm-3 col-form-label text-center">Confrim Password</label>
          <div class="col-sm-8">
            <input type="password" class="form-control" id="forConfirmPassword" name="confirmPassword" required minlength="6" maxlength="18">
            <label for="" class="equalPassword" style="display: none; color: #f00;">两次密码输入不正确</label>
          </div>
        </div>
        <div class="form-group row">
          <label for="forCellphone" class="col-sm-3 col-form-label text-center">Telephone</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" id="forCellphone" name="telephone" required>
          </div>
        </div>
        <div class="form-group row">
          <label for="forEmail" class="col-sm-3 col-form-label text-center">Email</label>
          <div class="col-sm-8">
            <input type="email" class="form-control" id="forEmail" name="email" required>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-3"></label>
          <div class="col-sm-8">
            <div class="custom-control custom-radio custom-control-inline">
              <input type="radio" id="forMan" name="gender" class="custom-control-input" value="1" checked>
              <label class="custom-control-label" for="forMan">Man</label>
            </div>
            <div class="custom-control custom-radio custom-control-inline">
              <input type="radio" id="forWoman" name="gender" class="custom-control-input" value="0">
              <label class="custom-control-label" for="forWoman">Woman</label>
            </div>
          </div>
        </div>
        <div class="form-group row">
          <label for="" class="col-sm-3 col-form-label text-center">Resume</label>
          <div class="col-sm-8">
            <textarea id="forRefuseResion" name="resume" class="form-control"></textarea>
          </div>
        </div>
        <div class="form-group row">
          <div class="col-sm-3"></div>
          <div class="col-sm-8">
            <button type="submit" class="btn btn-primary btn-block">Register</button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="/node_modules/jquery/dist/jquery.min.js"></script>
  <script>
    $(function () {
      // 判断两次密码相等否
      $('#forConfirmPassword').on('focusout', function () {
        if ($('#forPassword').val() != $('#forConfirmPassword').val()) {
          $ ('.equalPassword').css('display', 'block')
        } else {
          $ ('.equalPassword').css('display', 'none')
        }
      })
      // 提交表单
      $('#registerForm').on('submit', function (e) {
        e.preventDefault()
        var formData = $(this).serialize()
        $.ajax({
          url: '/register',
          type: 'post',
          data: formData,
          dataType: 'json',
          success: function (data) {
            if (data.isExist) {
              window.alert('用户名已存在')
            }
            if (data.err_code === 0) {
              window.alert('注册成功...')
              window.location.href = '/'
            } else if (data.err_code === 1) {
              window.alert('注册失败...')
            } else if (data.err_code === 500) {
              window.alert('服务器忙，请稍后重试！')
            }
          }
        })
      })
    })
  </script>
</body>
</html>